<template>
  <div class="container">
    <div class="content">
      <VueVideoPlayer v-bind="playerOption" @error="playerError" />
    </div>
    <div class="menu-wrap">
      <div class="menu">
        <CommonMenu tooltipPlacement="right" :menuConfig="menuConfig" v-model="playerOption"> </CommonMenu>

        <el-upload action accept=".mp4" :auto-upload="false" :show-file-list="false" :on-change="handleFileChange">
          <el-button type="primary" size="small">
            打开本地url &nbsp;
            <i class="iconfont icon-dakaiwenjianjia"></i>
          </el-button>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { open } from "@tauri-apps/api/dialog";
import { appDir } from "@tauri-apps/api/path";
import { menuConfig } from "./config";
import { isTauri } from "@/utils";

import type { UploadFile, UploadFiles } from "element-plus";
import type { VideoPlayerProps } from "@videojs-player/vue/dist/videojs-player.esm";

const __dirname = __APP_DIRNAME__.join("/");
const selected = ref();

const playerOption = reactive<VideoPlayerProps>({
  src: "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
  // src: "C:/Users/33153/Desktop/test1.mp4",
  // src: "http://119.164.216.162:9901/tsfile/live/0002_1.m3u8",
  controls: true,
  volume: 0.6,
  aspectRatio: "4:3",
  playbackRates: [0.5, 1, 1.5, 2, 3, 10],
  // poster: "/wechat_avatar.png",
  userActions: {
    hotkeys(event: any) {
      // 键盘热键
      const volume = playerOption.volume;
      const { which, target, ctrlKey } = event;
      const currentTime = target.currentTime;

      switch (which) {
        case 13:
          this.play();
          break;
        case 32:
          this.pause();
          break;
        case 38:
          if (volume && volume < 1) {
            playerOption.volume = volume + 0.1;
          }
          break;
        case 40:
          if (volume && volume > 0.1) {
            playerOption.volume = volume - 0.1;
          }
          break;
        case 37:
          if (ctrlKey) {
            target.currentTime = currentTime - 30;
          } else {
            target.currentTime = currentTime - 10;
          }
          break;

        case 39:
          if (ctrlKey) {
            target.currentTime = currentTime + 30;
          } else {
            target.currentTime = currentTime + 10;
          }
          break;
      }
      if (event.which === 32) this.pause();
      if (event.which === 89) this.play();
    }
  }
});

// input 打开文件
const handleFileChange = async (uploadFile: UploadFile, _uploadFiles: UploadFiles) => {
  // const res = await fileReaderFile(uploadFile.raw as Blob, "Base64");
  // if (typeof res === "string") playerOption.src = res;

  // const url = window.URL.createObjectURL(uploadFile.raw as Blob);
  // playerOption.src = url;
  // playerOption.src = url.replace("blob:", "") + ".mp4";

  console.log("uploadFile: ", uploadFile.raw);
};

// 打开本地文件
const openFile = async () => {
  if (isTauri()) {
    const openRes = await open({
      title: "选择媒体文件",
      multiple: false,
      filters: [
        {
          name: "Mp4",
          extensions: ["mp4", "ts"]
        }
      ]
    });
    if (openRes !== null && typeof openRes === "string") {
      selected.value = openRes;
      const root = await appDir();
      console.log(root, openRes);
    } else {
      console.warn("取消选择");
    }
  }
};

const playerError = (err: any) => {
  console.log("error: ", err);
};
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.container {
  display: flex;
  height: calc(100vh - 110px);

  .content {
    flex: 1;
    height: 100%;
    // border: 1px solid red;
    margin-right: 20px;
  }

  .menu-wrap {
    flex: 1;
    height: 100%;
    // border: 1px solid green;

    .menu {
      max-width: 30%;
      box-shadow: $slanting-shadow;
      padding: 10px;
      border-radius: 6px;
    }
  }
}
</style>
